<script setup>
import Typed from 'typed.js';
import { ref, onMounted, onUnmounted } from 'vue';

const typed = ref(null)

const options = ref({
    strings: ['Hi, 你好','我是贲风', '我是一名前端开发工程师'],
    typeSpeed: 150,
    backSpeed: 100,
    loop: true,
})

const typedInit = () => {
    typed.value = new Typed('#element', options.value);
}

onMounted(() => {
    typedInit()
})

onUnmounted(() => {

})
</script>

<template>
    <div class="typedArea">
        <div id="element" class="typedDom"></div>
    </div>
</template>

<style scoped>
.typedArea {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 40px;
    letter-spacing: 6px;
    color: #fff;
}
.typedDom {
    text-shadow: 0 0 2px gold,
                 0 0 10px red,
                8px 6px 4px rgba(0,0,0, 0.4);
}

/* 待机块样式 */
:deep(.typed-cursor) {
    color: #000 !important;
}
</style>